<template>
    <div class="navBox">
        <a-form :form="nav" @submit="allSubmit">
                <a-form-item
                    label="导航位置"
                    :label-col="{span:6}"
                    :wrapper-col="{span:6}"
                >
                    <a-select
                        v-decorator="['position',{
                            rules:[{required:true,message:'请选择位置'}]
                        }]"
                        @change="getNav"
                    >
                        <a-select-option v-for="k in posOption" :key="k.pos_id" :value="k.pos_id">
                            {{k.pos_name}}

                        </a-select-option>
                    </a-select>
                </a-form-item>
                <hr>
                <p/><p/>
               <a-table  :columns="navColumns" :dataSource="navList" bordered :pagination="false" :rowKey='dataSource=>dataSource.id' v-if="navList.length>0">
                    
                   <template 
                        v-for="col1 in ['ntitle']"
                        :slot="col1"
                        slot-scope="text,record,index"
                   >
                   <div :key="col1">
                        <a-input v-if="record.editable" :value="record.ntitle" 
                        @change="e => tableChange(e.target.value, record.id, col1)"/>
                        <template v-else>{{record.ntitle}}</template>
                   </div>
                   </template>

                    <template 
                        v-for="col2 in ['picture']"
                        :slot="col2"
                        slot-scope="text,record,index"
                    >
                    <div :key="col2">
                        <template v-if="record.editable">
                                <a-upload
                                    action="http://ll.qy.com/api/10050"
                                    listType="picture-card"
                                    :fileList="fileList"
                                    @change="upload"
                                >
                                    <div v-if="fileList.length < 1">
                                        <a-icon type="plus" />
                                        <div class="ant-upload-text">Upload</div>
                                    </div>
                                </a-upload>
                        </template>

                        <img v-else :src="getImg(text)" width="100px">
                    </div>
                    </template>
                    <template
                        v-for="col3 in ['link_type']"
                        :slot="col3"
                        slot-scope="text,record,index"
                    >
                        <a-select
                            :value="record.link_type"
                            v-if="record.editable"
                            :key="col3"
                            @change="(e) => selectChange(e, record.id, col3)"
                        >
                            <a-select-option v-for="k in linkTypeOptions" :key="k.id" :value="k.id">
                                {{k.link_name}}
                            </a-select-option>
                        </a-select>
                        <template v-else>
                            {{showLinkType(text)}}
                        </template>

                    </template>


                    <template
                        v-for="col4 in ['link_target']"
                        :slot="col4"
                        slot-scope="text,record,index"
                    >
                    <a-input-number v-if="record.editable" :value="text" :key="col4"
                        @change="e => tableChange(e, record.id, col4)"/>
                        <template v-else>
                            {{text}}
                        </template>
                    </template>

                    <template
                        v-for="col5 in ['states']"
                        :slot="col5"
                        slot-scope="text,record,index"
                    >
                     <a-switch 
                         checkedChildren="上线"  unCheckedChildren="下线"  :defaultChecked="text==true?true:false"  size="large" v-if="record.editable"
                        @change="e => tableChange(e, record.id, col5)"
                        :key="col5"
                        />
                        <template v-else>
                            {{text==true?"上线":"下线"}}
                        </template>
                    </template>
            <template slot="action" slot-scope="text, record, index">
                <div class="editable-row-operations">
                    <span v-if="record.editable">
                        <a @click="() => save(record.id)">Save</a>
                        <a-popconfirm title="确认取消编辑?" @confirm="() => cancel(record.id)">
                            <a>Cancel</a>
                        </a-popconfirm>
                    </span>
                    <span v-else>
                        <!-- ====== -->
                        <a @click="() => edit(record.id)">Edit</a>
                        <a-popconfirm title="确认取消编辑?" @confirm="() => deleteTag(record.id)">
                            <a>delete</a>
                        </a-popconfirm>
                    </span>
                </div>
            </template>
               </a-table>
                <p><p><p><p>
                <template v-if="!this.isEdit">

                        <a-form-item
                            label="图片"
                            :label-col="{span:6}"
                            :wrapper-col="{span:6}"
                        >
                            <a-upload
                                    action="http://ll.qy.com/api/10050"
                                    listType="picture-card"
                                    :fileList="fileList"
                                    @change="upload"
                                    >
                                    <div v-if="fileList.length < 1">
                                        <a-icon type="plus" />
                                        <div class="ant-upload-text">Upload</div>
                                    </div>
                                </a-upload>
                        </a-form-item>
                        <a-form-item 
                            label="图片标题"
                            :label-col="{span:6}"
                            :wrapper-col="{span:6}"
                        >
                            <a-input v-model="ntitle" />
                        </a-form-item>
                        <a-form-item
                            label="导航类型"
                            :label-col="{span:6}"
                            :wrapper-col="{span:6}"
                        >
                            <a-select
                                v-model="link_type"
                            >
                                <a-select-option v-for="k in linkTypeOptions" :key="k.id" :value="k.id">
                                    {{k.link_name}}

                                </a-select-option>
                            </a-select>
                        </a-form-item>

                        <a-form-item 
                            label="导航链接"
                            :label-col="{span:6}"
                            :wrapper-col="{span:12}"
                        >
                            <a-input-number v-model="link_target" />
                        </a-form-item>
                        <a-form-item
                            label="状态"
                            :label-col="{span:6}"
                            :wrapper-col="{span:6}"
                        >
                            <a-switch 
                                v-model="states"
                                checkedChildren="上线"  unCheckedChildren="下线"  defaultChecked size="large"
                                />
                        </a-form-item>
                        <div class="addBtn">
                            <a-button type="primary" @click="add">添加</a-button>
                    </div>
                </template>
               <hr>

                <a-form-item class="saveBtn">
                        <a-button type="primary" html-type="submit">保存</a-button>
                </a-form-item>
        </a-form>
    </div>
</template> 

<script>
import axios from "axios";
export default{
    
    beforeCreate(){
        this.nav = this.$form.createForm(this,{name:'nav_form'});
    },
     methods:{
         deleteTag(id){
        
                this.navList = this.navList.filter(key=>key.id!=id);
            
        },
         cancel(key){
          
            let newData = [...this.navList];
        
            const target = newData.filter(item => key === item.id)[0];
            
            if (target) {

                Object.assign(target, this.cacheData.filter(item => key === item.id)[0]);
            
                delete target.editable;
       
                this.navList = newData;
         
                this.fileList = [];
            }

            this.isEdit = false;
         },
         selectChange(value, key, column) {
             console.log(value,key,column);
            let newData = [...this.navList];
            
            const target = newData.filter(item => key === item.id)[0];

            if (target) {

                let tagN = "";
                for(let i=0;i<this.linkTypeOptions.length;i++){
                    if(this.linkTypeOptions[i].id==value){
                        tagN = this.linkTypeOptions[i].name;
                    }
                }
                target[column] = tagN;
                target["link_type"] = value;
                this.skuList =newData;
            }
        },
         tableChange(value, key, column){
             console.log(value,key,column);
             let newData = [...this.navList];
             const target = newData.filter(item=>key==item.id)[0];
             if(target){
                 target[column] = value;
                 this.navList=newData;
             }
         },
         save(key){
                let newData = [...this.navList];
                const target = newData.filter(item => key === item.id)[0];
                if (target) {
                    if(this.tmpImg!=""){
                        target.picture = this.tmpImg;
                    }
                    delete target.editable;
                    this.navList =newData;
                    this.fileList = [];
                    this.cacheData = newData.map(item => ({ ...item }));
                }   
                this.isEdit = false;

            },
         edit(key){
             this.isEdit = true;
             this.restData();
             let  newData = [...this.navList];
            const target = newData.filter(item => key === item.id)[0];
            if (target) {
                target.editable = true;
                this.navList = newData;
            }
         },
         getNav(value){
             axios.get(this.GLOBAL_.apiUrl+"10040/"+value).then(
                 res=>{
                     if(res.data.code==1){
                         
                         this.navList = res.data.data;

                        this.cacheData = this.navList.map(item => ({ ...item }));
                     }
                 }
             )
         },
         showLinkType(id){
            for(let i=0;i<this.linkTypeOptions.length;i++){
                if(id==this.linkTypeOptions[i].id){
                    return this.linkTypeOptions[i].link_name;
                }
            }
        },
         getImg(text){
             return "http://img.qy.com/"+text;
         },
         restData(){
                    this.ntitle="";
                    this.link_type="";
                    this.link_target=0;
                    this.fileList=[];
         },
        allSubmit(e){
            e.preventDefault();
            this.nav.validateFields((err,values)=>{
                if(!err){
                    values['navList']=this.navList;
                    console.log(values);
                    axios.post(this.GLOBAL_.apiUrl+"10041",JSON.stringify(values)).then(
                        res=>{
                            if(res.data.code==1){
                                this.$message.success("添加成功");
                                this.restData();
                            }else{
                                this.$message.error("添加失败");
                            }

                        }
                    )
                    console.log(values);

                   this.restData();
                    
                }
            })
        },
        upload:function({ fileList }){
            if(fileList.length>0){
                this.tmpImg=fileList[0].response;
            }
             this.fileList = fileList;
        },
        add:function(){
            if(this.fileList.length==0){
                this.$message.error("请添加图片");
                return ;
            }else if(this.link_type==""){
                this.$message.error("请选择导航类型");
                return ;

            }else if(this.link_target==null){
                this.$message.error("请选择导航链接");
                return ;

            }
            let param = {
                ntitle:this.ntitle,
                link_type:this.link_type,
                link_target:this.link_target,
                picture:this.tmpImg,
                states:this.states
            };
            this.navList.push(param);
            this.CacheData = this.navList.map(item => ({ ...item }));
            
            this.restData();

        }
    },
    data(){
        return {
            states:true,
            cacheData:[],
            isEdit:false,
            navColumns:[
                {
                    title:"标题",
                    dataIndex:"ntitle",
                    width:"30%",
                    scopedSlots:{customRender:"ntitle"}
                },
                 {
                    title:"图片",
                    dataIndex:"picture",
                    width:"20%",
                    scopedSlots:{customRender:"picture"}
                },
                {
                    title:"导航类型",
                    dataIndex:"link_type",
                    width:"20%",
                    scopedSlots:{customRender:"link_type"}
                },
                {
                    title:"导航连接",
                    dataIndex:"link_target",
                    width:"10%",
                    scopedSlots:{customRender:"link_target"}

                },
                {
                    title:"是否上线",
                    dataIndex:"states",
                    width:"10%",
                    scopedSlots:{customRender:"states"}
                },
                {
                    title:"操作",
                    dataIndex:"action",
                    scopedSlots:{customRender:"action"}
                }
            ],
            nid:1,
            navList:[],
            fileList:[],
            link_type:"",
            tmpImg:"",
            ntitle:"",
            link_target:0,
            posOption:[
                {
                    pos_id:1,
                    pos_name:'顶部导航'
                },
                {
                    pos_id:2,
                    pos_name:'轮播图'
                },
            ],
            linkTypeOptions:[
                {
                    id:1,
                    link_name:"专题"
                },
                {
                    id:2,
                    link_name:"活动"
                }
            ]
        }
    },

   
}
</script>

<style lang="less" scoped>
    .navBox{
        width:90%;
        margin:3em auto;
        background:#fff;
        .need{
                    color:red;
                     margin-left:10px;
                }
        .addBtn{
            text-align: center;
        }
        .saveBtn{
            margin-top:10px;
            text-align: center;
        }
    }

    
</style>